import React, { useState } from 'react';
import {
  PieChartOutlined,

} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import * as Type from '../utils/index'
import { MenuItemType, ItemType } from 'antd/es/menu/hooks/useItems';
import { RouterHomes } from '../router/RouterConfig';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  path: string,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label: <NavLink to={path}>{label}</NavLink>
  } as MenuItem;
}

// const items: MenuItem[] = [
//   getItem('Option 1', "/main/index", '1', <PieChartOutlined />),
//   getItem('Option 2', "/main/cat", '2', <DesktopOutlined />),
//   getItem('User', 'sub1', "/main/menu", <UserOutlined />, [
//     getItem('Tom', "/login", '3'),
//     getItem('Bill', "/login", '4'),
//     getItem('Alex', "/login", '5'),
//   ]),

// ];

const tc = () => {
  window.localStorage.removeItem('token')
  window.localStorage.removeItem('role')
  window.localStorage.removeItem('username')
  window.localStorage.removeItem('router')
  window.location.href = "/login"
}
const Raect_App = (aee: Type.Data_List) => {
  const newAee: ItemType<MenuItemType>[] = []
  aee.forEach((item: Type.DataItems, index: number) => {
    newAee.push(getItem(item.title, index, item.path, <PieChartOutlined />))
  })
  return newAee

}

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={Raect_App(RouterHomes)} />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} >
          <button onClick={tc}>退出登录</button>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
};

export default App;